import React, {
	Component
} from 'react';
import {
	observer,
} from 'mobx-react';
import {
	Route,
	withRouter,
} from 'react-router-dom';
import {
	DatePicker,
	Icon,
	Tools,
} from 'weaver-mobile';
import Calender from './Calender.js';
const { DatePickerInput } = DatePicker;
const getLabel = Tools.getLabel;

@withRouter
@observer
export default class Top extends Component {
	handleClick = (index) => {
		const {
			store,
			history,
		} = this.props, {
			calenderLayout,
			loadCalenderInfo,
		} = store;

		history.push(calenderLayout.path);
		loadCalenderInfo();
	}

	render() {
		const {
			store,
		} = this.props, {
			date,
			handleDatePickerChange,
			calenderLayout,
		} = store;

		return (
			<div>
				<DatePickerInput mode="month" value={date} onChange={handleDatePickerChange} className="attendance-date"/>
				<div className='attendance-entry' onClick={this.handleClick}>
					<Icon type="calendar" size="xxs" color="#61A9F5"/>
					<span className="attendance-entry-label">{getLabel(513099,"打卡月历")}</span>
				</div>

				<Route key={calenderLayout.id} path={calenderLayout.path} render={() => <Calender store={store}/>}/>
			</div>
		);
	}
}